.day {
  --day-size-xs: 30px;
  --day-size-sm: 36px;
  --day-size-md: 42px;
  --day-size-lg: 48px;
  --day-size-xl: 54px;
  --day-size: var(--day-size-sm);

  width: var(--day-size, var(--day-size-sm));
  height: var(--day-size, var(--day-size-sm));
  font-size: calc(var(--day-size) / 2.8);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  cursor: pointer;
  background-color: transparent;
  border-radius: var(--mantine-radius-default);
  color: var(--mantine-color-text);
  opacity: 1;

  @mixin hover {
    &:where(:not([data-static], [data-disabled], [data-selected], [data-in-range])) {
      @mixin light {
        background-color: var(--mantine-color-gray-0);
      }

      @mixin dark {
        background-color: var(--mantine-color-dark-5);
      }
    }
  }

  &:where([data-static]) {
    user-select: auto;
    cursor: default;
  }

  &:where([data-weekend]) {
    color: var(--mantine-color-red-6);
  }

  &:where([data-outside]) {
    color: var(--mantine-color-dimmed);
    opacity: 0.5;
  }

  &:where(:disabled, [data-disabled]) {
    color: var(--mantine-color-disabled-color);
    cursor: not-allowed;
    opacity: 0.5;
  }

  &:where([data-hidden]) {
    display: none;
  }

  &:where([data-today][data-highlight-today]:not([data-selected], [data-in-range])) {
    @mixin where-light {
      border: 1px solid var(--mantine-color-gray-4);
    }

    @mixin where-dark {
      border: 1px solid var(--mantine-color-dark-4);
    }
  }

  &:where([data-in-range]) {
    background-color: var(--mantine-primary-color-light-hover);
    border-radius: 0;

    @mixin hover {
      &:where(:not([data-disabled], [data-static])) {
        background-color: var(--mantine-primary-color-light);
      }
    }
  }

  &:where([data-first-in-range]) {
    border-radius: 0;
    border-start-start-radius: var(--mantine-radius-default);
    border-end-start-radius: var(--mantine-radius-default);
  }

  &:where([data-last-in-range]) {
    border-radius: 0;
    border-end-end-radius: var(--mantine-radius-default);
    border-start-end-radius: var(--mantine-radius-default);
  }

  &:where([data-last-in-range][data-first-in-range]) {
    border-radius: var(--mantine-radius-default);
  }

  &:where([data-selected]) {
    background-color: var(--mantine-primary-color-filled);
    color: var(--mantine-primary-color-contrast);

    @mixin hover {
      &:where(:not([data-disabled], [data-static])) {
        background-color: var(--mantine-primary-color-filled-hover);
      }
    }
  }
}
